<template>
	<view>
		<view class="header">
			<view v-if="opacity != 0" style="width: 100%;height: 200rpx;background-color: #ffffff; position: fixed;top: 0;z-index: 5;"
				:style="{'opacity': opacity}">
				<view style="width: 100%;height: 100%;display: flex;justify-content: space-evenly;margin-top: 120rpx;">
					<view style="width: 24%;height: 40%;  display: flex;position: relative;" @tap="selectAddress">
						<button
							style="min-width: 98%;height: 100%; height: 90%; background-color: #ffffff; border-style: none; border-radius: 50rpx; font-size:32rpx; text-align: left;">{{address}}</button>
						<image style="width: 45rpx;position: absolute;right: 25rpx;top: 22%;"
							src="../../static/down.png" mode="widthFix"></image>
						<u-picker :show="show" :closeOnClickOverlay="true" ref="uPicker" :columns="columns"
							@cancel="closeAddress" @confirm="confirm" @change="changeHandler" />
					</view>
					<!-- 搜索框 -->
					<view>
						<u-search @tap="clickSearch" style="height: 100%;" disabled="true" placeholder="请输入您心爱房源关键词" :showAction="false"></u-search>
					</view>
				</view>
			</view>
			<view class="header-background">
			</view>
			<view
				style="width: 100%;height: 20%;display: flex;justify-content: space-evenly;position: absolute;bottom: 0;z-index: 3;">
				<view style="width: 24%;height: 100%; display: flex;position: relative;" @tap="selectAddress">
					<button
						style="min-width: 98%;height: 100%; height: 90%; background-color: #ffffff; border-style: none; border-radius: 50rpx; font-size:32rpx; text-align: left;">{{address}}</button>
					<image style="width: 45rpx;position: absolute;right: 25rpx;top: 22%;" src="../../static/down.png"
						mode="widthFix"></image>
					<u-picker :show="show" :closeOnClickOverlay="true" ref="uPicker" :columns="columns"
						@cancel="closeAddress" @confirm="confirm" @change="changeHandler" />
				</view>
				<!-- 搜索框 -->
				<view>
					<u-search @tap="clickSearch" style="height: 100%;" disabled="true" placeholder="请输入您心爱房源关键词" :showAction="false"></u-search>
				</view>
			</view>
		</view>
		<view class="container">
			<!-- 快捷跳转方式 -->
			<view class="nav">
				<view>
					<u-grid :border="false" col="4">
						<u-grid-item style="height: 100rpx;" @click="NavClick(listItem)"
							v-for="(listItem,listIndex) in list" :key="listIndex">
							<view style="width: 50rpx;height: 29px;">
								<image :src="listItem.ImageSrc" style="width: 100%;" mode="widthFix"></image>
							</view>
							<view class="grid-text" style="font-size: 27rpx;">{{listItem.title}}</view>
						</u-grid-item>
					</u-grid>
					<u-toast ref="uToast" />
				</view>
			</view>
			<!-- 中间展示部分 -->
			<view class="container_center">
				<view class="center_zuo center_wb">
					<image style="width: 100%;" mode="widthFix"
						src="https://cdn7.axureshop.com/demo2024/2310467/images/%E9%A6%96%E9%A1%B5/u683.svg" alt="" />
					<view style="position: absolute;top: 20rpx;left: 15rpx;line-height: 40rpx;">
						<p style="font-size: 27.5rpx;">整套租赁 租一间返一套</p>
						<p style="font-size: 25rpx;color: #666666;">合租价格享整租空间</p>
					</view>
				</view>
				<view class="center_wb">
					<view style="position: relative;">
						<image style="width: 100%;margin-bottom: 2.5rpx;"
							src="https://cdn7.axureshop.com/demo2024/2310467/images/%E9%A6%96%E9%A1%B5/u689.svg"
							mode="widthFix"></image>
						<view style="position: absolute;top: 20rpx;left: 15rpx; line-height: 40rpx;">
							<p style="font-size: 27.5rpx;">情侣居住 私密空间</p>
							<p style="font-size: 25rpx;color: #666666;">独卫好房</p>
						</view>
					</view>
					<view style="position: relative;">
						<image style="width: 100%;margin-top: 2.5rpx;"
							src="https://cdn7.axureshop.com/demo2024/2310467/images/%E9%A6%96%E9%A1%B5/u693.svg"
							mode="widthFix"></image>
						<view style="position: absolute;top: 20rpx; left: 15rpx;line-height: 40rpx;">
							<p style="font-size: 27.5rpx;">优质房源 学生专区</p>
							<p style="font-size: 25rpx;color: #666666;">在线签约抢好房</p>
						</view>
					</view>
				</view>
			</view>
			<!-- 中间下半部分展示 -->
			<view class="container_bottom">
				<view style="margin: 40rpx 25rpx 10rpx 25rpx;">
					精选好房
				</view>
				<view style="width: 100%;">
					<view style="width: 94.5%;height: 600rpx;padding: 20rpx;margin-top: 10rpx;"
						v-for="(room,index) in SelectedRooms" :key="index">
						<view class="uni-margin-wrap" @tap="Information">
							<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
								:interval="interval" :duration="duration">
								<swiper-item v-for="(image,index) in room.imgList" :key="index">
									<view class="swiper-item uni-bg-red">
										<image :src="image.imgSrc" mode="widthFix"></image>
									</view>
								</swiper-item>
							</swiper>
						</view>
						<view style="width: 100%;padding: 20rpx;line-height: 45rpx;" @tap="Information">
							<view>{{room.roomTitle}}</view>
							<view>
								<u--text prefixIcon="map" :size='13' iconStyle="font-size: 29rpx"
									:text="room.roomAddress"></u--text>
							</view>
							<view style="width: 100%;display: flex;">
								<view style="margin: 5rpx;" v-for="(item,TableIndex) in room.roomLabel"
									:key="TableIndex">
									<u-tag size='mini' :text="item" plain> </u-tag>
								</view>
							</view>
							<view style="display: flex;height: 50rpx;line-height: 50rpx;">
								<view style="width: 30%; color: #ee4242;">
									￥{{room.roomMoney}}/月
								</view>
								<view style="width: 66%;height: 50rpx; text-align: right;">
									<image style="width: 30rpx;vertical-align: -5rpx;margin-right: 5rpx;"
										src="../../static/日期.png" mode="widthFix"></image>
									<text style="font-size: 27rpx;color: #9e9e9e;">可入住日期{{room.roomDataTime}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottom">
				<uni-load-more :status="status" :iconSize="18" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				opacity: 0,
				show: false,
				columns: [
					['中国', '美国'],
					['深圳', '厦门', '上海', '拉萨']
				],
				columnData: [
					['深圳', '厦门', '上海', '拉萨'],
					['得州', '华盛顿', '纽约', '阿拉斯加']
				],
				address: '北京',
				list: [{
						ImageSrc: '../../static/房源.png',
						title: '新上房源',
						path: '/seedComponents/ShoSearch/SearchResult?title=全部房源'
					},
					{
						ImageSrc: '../../static/特惠.png',
						title: '特惠房源',
						path: '/seedComponents/ShoSearch/SearchResult?title=全部房源'
					},
					{
						ImageSrc: '../../static/房屋求租招租.png',
						title: '求租广场',
						path: '/pages/RentSeeking/RentSeeking'
					},
					{
						ImageSrc: '../../static/品牌公寓.png',
						title: '品牌公寓',
						path: '/seedComponents/ShoSearch/SearchResult?title=全部房源'
					}
				],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				SelectedRooms: [{
						imgList: [{
								imgSrc: 'https://www.ijuzhong.com/zhuangxiu/uploads/allimg/20200111/1578719044291_4.jpg'
							},
							{
								imgSrc: 'https://img1.baidu.com/it/u=2126214998,1644295934&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
							},
							{
								imgSrc: 'https://img0.baidu.com/it/u=2571859928,2111628958&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=335'
							},
						],
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁'],
						roomMoney: '1400',
						roomDataTime: '2024/08/10'
					},
					{
						imgList: [{
								imgSrc: 'https://img2.baidu.com/it/u=1795613048,2862580360&fm=253&fmt=auto&app=138&f=JPEG'
							},
							{
								imgSrc: 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F1002%2F9aa2a30bj00r0bx8r001mc000hs00hsm.jpg&thumbnail=660x2147483647&quality=80&type=jpg'
							},
							{
								imgSrc: 'https://img2.baidu.com/it/u=640370081,883809769&fm=253&fmt=auto&app=138&f=JPEG'
							},
						],
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁'],
						roomMoney: '1400',
						roomDataTime: '2024/08/10'
					},
					{
						imgList: [{
								imgSrc: 'https://www.ijuzhong.com/zhuangxiu/uploads/allimg/20200111/1578719044291_4.jpg'
							},
							{
								imgSrc: 'https://img1.baidu.com/it/u=2126214998,1644295934&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
							},
							{
								imgSrc: 'https://img0.baidu.com/it/u=2571859928,2111628958&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=335'
							},
						],
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁'],
						roomMoney: '1400',
						roomDataTime: '2024/08/10'
					},
					{
						imgList: [{
								imgSrc: 'https://www.ijuzhong.com/zhuangxiu/uploads/allimg/20200111/1578719044291_4.jpg'
							},
							{
								imgSrc: 'https://img1.baidu.com/it/u=2126214998,1644295934&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
							},
							{
								imgSrc: 'https://img0.baidu.com/it/u=2571859928,2111628958&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=335'
							},
						],
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁'],
						roomMoney: '1400',
						roomDataTime: '2024/08/10'
					},
					{
						imgList: [{
								imgSrc: 'https://www.ijuzhong.com/zhuangxiu/uploads/allimg/20200111/1578719044291_4.jpg'
							},
							{
								imgSrc: 'https://img1.baidu.com/it/u=2126214998,1644295934&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
							},
							{
								imgSrc: 'https://img0.baidu.com/it/u=2571859928,2111628958&fm=253&fmt=auto&app=138&f=JPEG'
							},
						],
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁'],
						roomMoney: '1400',
						roomDataTime: '2024/08/10'
					}
				],
				status: 'loading'
			}
		},
		methods: {
			Information(){
				uni.navigateTo({
					url: '/seedComponents/HouseInformation/HouseInformation'
				})
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				this.address = e.value[1]
				this.show = false
			},
			selectAddress() {
				this.show = true
			},
			closeAddress() {
				this.show = false
			},
			NavClick(item) {
				uni.navigateTo({
					url: item.path
				})
			},
			clickSearch() {
				uni.navigateTo({
					url: '/seedComponents/ShoSearch/ShoSearch'
				})
			}
		},
		onPageScroll(res) {
			let top = res.scrollTop
			if (top < 200) {
				this.opacity = 0
			}
			if (top >= 200) {
				this.opacity = 0.5
			}
			if (top >= 300) {
				this.opacity = 1
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 470rpx;
		position: relative;

		.header-background {
			width: 100%;
			height: 90%;
			background: url("https://big.justeasy.cn/effectwater/202206/20220616112150_62aaa1cee83c0.jpg");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			position: relative;
			z-index: 2;
		}
	}

	.container_center {
		width: 95%;
		padding: 20rpx;
		height: 270rpx;
		display: flex;

		.center_wb {
			width: 48%;
			margin: 10rpx;
			height: 100%;
		}

		.center_zuo {
			position: relative;
		}
	}

	.container_bottom {
		.uni-margin-wrap {
			width: 100%;
			height: 400rpx;

			.swiper {
				width: 100%;
				height: 400rpx;

				.swiper-item {
					width: 100%;
					height: 400rpx;

					image {
						border-radius: 20rpx 20rpx 0 0;
						width: 100%;
						// height: 100%;
						object-fit: cover;
					}
				}
			}
		}
	}

	.bottom {
		margin: 50rpx;
	}
</style>